<script setup lang="ts">
import CategoryApi from "@/api/content/lz-category";
import { computed, onMounted, onUnmounted, ref } from "vue";
/// 解决样式冲突 不要删
import "element-plus/es/components/message-box/style/css";

import { useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
import { Folder, House, Link, Star, SwitchButton, User } from "@element-plus/icons-vue";
import { friendlyTime } from "@/utils/friendlyTime";
import SidebarMenuItem from "@/layout/SiderBarMenuItem.vue";
import RecursiveMenuItem from "@/components/RecursiveMenuItem.vue";
import { useArticleStore } from "@/store/modules/article";

const showBgc = ref(true);
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

const activeIndex = ref("/");
const classListObj = ref<any[]>([]);
const greetingText = ref("");
const showCursor = ref(true);
const isSticky = ref(false);
const activeCategoryId = ref<number | null>(null);
const wellKnownSaying = friendlyTime();

const hasLogin = computed(() => userStore.userInfo?.username != undefined);
const userInfo = computed(() => userStore.userInfo);
const fullText = computed(() => `Hi, ${userInfo.value?.username ?? "Visitor"}`);

const isMobile = ref(false);
const menuList = ref<any[]>([]);
const articleStore = useArticleStore();
menuList.value = [
  {
    path: "/",
    name: "首页",
    meta: {
      title: "首页",
    },
    children: [],
    index: "1",
  },
  {
    path: "/share",
    name: "分类",
    meta: {
      title: "分类",
      icon: "el-icon-FolderOpened",
    },
    index: "2",
    children: [],
  },
  {
    path: "/appreciation",
    name: "赞赏支持",
    meta: {
      title: "赞赏支持",
      icon: "el-icon-StarFilled",
    },
    children: [],
    index: "3",
  },
  {
    path: "/friend_links",
    meta: {
      title: "友情链接",
      icon: "el-icon-Link",
    },
    name: "友情链接",
    children: [],
    index: "4",
  },
];

onMounted(() => {
  initData();
  typeText();
  window.addEventListener("scroll", handleScroll);
  // 根据当前路由设置激活状态
  setActiveByRoute();
  checkMobile();
  window.addEventListener("resize", checkMobile);
});

onUnmounted(() => {
  window.removeEventListener("resize", checkMobile);
  window.removeEventListener("scroll", handleScroll);
});

const handleScroll = () => {
  isSticky.value = window.scrollY > 0;
};

function assignIndexes(routes: any[], parentIndex = "2", level = 1): void {
  routes.forEach((route, i) => {
    // 计算当前元素的 index
    route.index = `${parentIndex}-${i + 1}`;

    // 递归处理子元素
    if (route.children && route.children.length > 0) {
      assignIndexes(route.children, route.index, level + 1);
    }
  });
}

// 递归生成 Vue Router 配置
function buildCategoryRoutes(categories: any[]): any[] {
  const categoryMap = new Map<number, any>(); // 存放 id -> route 映射
  const result: any[] = [];

  // 先遍历所有分类，存入 Map 方便查找
  categories.forEach((category) => {
    categoryMap.set(category.id, {
      path: "/share",
      name: category.name,
      query: {
        classId: category.id,
      },
      meta: {
        title: category.name,
        icon: "",
      },
      children: [],
    });
  });

  // 组装树结构
  categories.forEach((category) => {
    if (category.pid === "-1") {
      result.push(categoryMap.get(category.id)!);
    } else {
      const parent = categoryMap.get(category.pid);
      if (parent) {
        parent.children!.push(categoryMap.get(category.id)!);
      }
    }
  });

  return result;
}

async function initData() {
  try {
    const res = await CategoryApi.getAll();
    const treeData = buildCategoryRoutes(res);
    assignIndexes(treeData);
    classListObj.value = treeData;
    menuList.value[1].children = treeData;
  } catch (error) {
    console.error("Failed to fetch categories:", error);
  }
}

const typeText = () => {
  let index = 0;
  const timer = setInterval(() => {
    if (index < fullText.value.length) {
      greetingText.value += fullText.value[index];
      index++;
    } else {
      clearInterval(timer);
      // wellKnownSaying.value = friendlyTime() ?? ''
      showCursor.value = false;
    }
  }, 150);
};

const login = () => {
  router.push("/login");
};

const register = () => {
  router.push("/register");
};

const logout = async () => {
  await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  try {
    await userStore.logout();
    ElMessage.success("退出登录成功");
    localStorage.removeItem("userInfo");
    await router.push("/login");
  } catch (error) {
    console.error("Failed to logout:", error);
  }
};

const handleCategoryClick = async (categoryId: number) => {
  try {
    // 设置当前分类ID为active
    activeCategoryId.value = Number(categoryId);
    // 设置activeIndex，确保导航链接显示active状态
    activeIndex.value = "/share?classId=" + categoryId;

    // 关闭下拉菜单（仅在移动端）
    // if (isMobile.value) {
    //   const dropdownMenu = document.querySelector(".dropdown-menu");
    //   const bsDropdown = bootstrap.Dropdown.getInstance(
    //     dropdownMenu?.parentElement?.querySelector(".dropdown-toggle")
    //   );
    //   if (bsDropdown) {
    //     bsDropdown.hide();
    //   }
    // }

    // 导航到对应页面
    await router.push("/redirect/share?classId=" + categoryId);
  } catch (e) {
    console.log(e);
  }
};

const setActiveByRoute = () => {
  const path = route.path;

  // 重置所有active状态
  activeIndex.value = "";
  activeCategoryId.value = null;

  if (path.includes("/share")) {
    // 获取classId
    const categoryId = route.query.classId as any;
    activeCategoryId.value = Number(categoryId);
    activeIndex.value = "/share?classId=" + categoryId;
    return;
  }

  // 设置当前路径为active
  activeIndex.value = path;

  // 特殊处理根路径
  if (path === "/" || path === "") {
    activeIndex.value = "/";
  }
};

// 监听路由变化
watch(
  () => route.fullPath,
  () => {
    setActiveByRoute();
  },
  { immediate: true }
);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 992; // 使用992px作为断点，与Bootstrap的lg断点一致
};

const handleSelect = (index: string, _keyPath: string[]) => {
  // 通过index 获取到路由中 相同index的路由 并处理嵌套的路由
  const item = findItemByIndex(menuList.value, index);
  console.log(item);
  if (item.path.indexOf("/share") === -1) {
    router.push(item.path);
  } else {
    router.push(`/redirect/share?classId=${item.query.classId}`);
  }
};

function findItemByIndex(menuList: any[], targetIndex: string): any | null {
  for (const item of menuList) {
    if (item.index === targetIndex) {
      return item; // 找到匹配的 index，返回整个 item
    }
    if (item.children && item.children.length > 0) {
      const childItem = findItemByIndex(item.children, targetIndex);
      if (childItem) {
        return childItem; // 递归返回子项
      }
    }
  }
  return null;
}

const searchText = ref("");

const handleSearch = () => {
  articleStore.setSearchValue(searchText.value);
};
</script>

<template>
  <!-- 大屏幕使用 Element Plus 菜单 -->
  <div class="navbar-container" :class="{ 'is-sticky': isSticky }">
    <div class="container el-menu-container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        background-color="transparent"
        text-color="rgba(255, 255, 255, 0.85)"
        active-text-color="#ffd700"
        @select="handleSelect"
      >
        <!-- 菜单项 -->
        <SidebarMenuItem
          v-for="route in menuList"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />

        <div class="flex-grow" />

        <!-- 未登录状态 -->
        <template v-if="!hasLogin">
          <div class="auth-buttons">
            <el-button type="primary" size="small" class="login-btn" @click="login">登录</el-button>
            <el-button type="info" size="small" plain class="register-btn" @click="register">
              注册
            </el-button>
          </div>
        </template>

        <!-- 已登录状态 -->
        <template v-else>
          <div class="search-wrapper">
            <div class="search-box">
              <i class="fa fa-search search-icon"></i>
              <input
                v-model="searchText"
                type="text"
                placeholder="搜索文章..."
                @keyup.enter="handleSearch"
              />
              <button v-if="searchText" class="clear-btn" @click="searchText = ''">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <el-dropdown trigger="click">
            <div class="user-profile">
              <img
                :src="userInfo?.avatar"
                class="user-avatar"
                :alt="userInfo?.username"
                width="36"
                height="36"
              />
              <span class="user-name">{{ userInfo?.username }}</span>
              <i class="fa fa-angle-down dropdown-icon"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/profile')">
                  <el-icon>
                    <User />
                  </el-icon>
                  <span>个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="logout">
                  <el-icon>
                    <SwitchButton />
                  </el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-menu>
    </div>

    <!-- 移动端使用 Bootstrap 导航栏 -->
    <nav class="navbar navbar-expand-lg mobile-navbar">
      <div class="container">
        <!-- 左侧菜单按钮 -->
        <div class="navbar-left">
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarContent"
            aria-controls="navbarContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>

        <template v-if="hasLogin">
          <!-- 中间搜索框 -->
          <div class="navbar-center">
            <div class="mobile-search">
              <div class="search-box">
                <i class="fa fa-search search-icon"></i>
                <input
                  v-model="searchText"
                  type="text"
                  placeholder="搜索文章..."
                  @keyup.enter="handleSearch"
                />
                <button v-if="searchText" class="clear-btn" @click="searchText = ''">
                  <i class="fa fa-times"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 右侧用户头像 -->
          <div class="navbar-right">
            <div class="nav-user">
              <template v-if="userInfo">
                <div class="user-avatar" data-bs-toggle="dropdown">
                  <img
                    :src="userInfo?.avatar"
                    class="user-avatar-img"
                    :alt="userInfo?.username"
                    width="36"
                    height="36"
                  />
                  <!--                <span class="user-name">{{ userInfo?.username }}</span>-->
                  <i class="fa fa-angle-down dropdown-icon"></i>
                </div>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <router-link class="dropdown-item" to="/profile">
                      <el-icon>
                        <User />
                      </el-icon>
                      <span>个人中心</span>
                    </router-link>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item" href="#" @click.prevent="logout">
                      <el-icon>
                        <SwitchButton />
                      </el-icon>
                      <span>退出登录</span>
                    </a>
                  </li>
                </ul>
              </template>
              <template v-else>
                <div class="auth-buttons-mobile">
                  <el-button type="primary" size="small" class="login-btn-mobile" @click="login">
                    登录
                  </el-button>
                  <el-button
                    type="info"
                    size="small"
                    plain
                    class="register-btn-mobile"
                    @click="register"
                  >
                    注册
                  </el-button>
                </div>
              </template>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- 使用Bootstrap样式的登录注册按钮 -->
          <div class="auth-buttons-container">
            <a href="#" class="btn btn-primary btn-sm" @click.prevent="login">
              <i class="fa fa-sign-in me-1"></i>
              登录
            </a>
            <a href="#" class="btn btn-outline-light btn-sm" @click.prevent="register">
              <i class="fa fa-user-plus me-1"></i>
              注册
            </a>
          </div>
        </template>

        <!-- 导航菜单内容 -->
        <div id="navbarContent" class="collapse navbar-collapse">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link" to="/" :class="{ active: activeIndex === '/' }">
                <el-icon class="menu-icon">
                  <House />
                </el-icon>
                <span>首页</span>
              </router-link>
            </li>

            <!-- 分类下拉菜单 -->
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                :class="{ active: activeIndex.includes('/share') }"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <el-icon class="menu-icon">
                  <Folder />
                </el-icon>
                <span>分类</span>
              </a>
              <ul class="dropdown-menu">
                <template v-for="item in menuList[1].children" :key="item.id">
                  <RecursiveMenuItem
                    :item="item"
                    :active-category-id="activeCategoryId"
                    @select="handleCategoryClick"
                  />
                </template>
              </ul>
            </li>

            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/appreciation"
                :class="{ active: activeIndex === '/appreciation' }"
              >
                <el-icon class="menu-icon">
                  <Star />
                </el-icon>
                <span>赞赏支持</span>
              </router-link>
            </li>

            <li class="nav-item">
              <router-link
                class="nav-link"
                to="/friend_links"
                :class="{ active: activeIndex === '/friend_links' }"
              >
                <el-icon class="menu-icon">
                  <Link />
                </el-icon>
                <span>友情链接</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!--   将背景图片展示全部-->
  <div v-if="showBgc" class="hero-section">
    <div class="hero-content">
      <div class="greeting">
        <span class="greeting-text">
          <span class="greeting-gradient">{{ greetingText }}</span>
          <span v-if="showCursor" class="cursor">|</span>
        </span>
      </div>
      <div class="profile-info">
        <img v-if="userInfo?.avatar" :src="userInfo?.avatar" alt="Profile" class="profile-image" />
        <!--        <span v-else style="display: block">未登录</span>-->
        <h2 class="profile-motto" :class="{ 'fade-in': wellKnownSaying }">
          <span class="gradient-text typing">{{ wellKnownSaying }}</span>
        </h2>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
/* 全局样式覆盖 - 不使用 scoped */
.el-menu--popup {
  background-color: rgba(25, 25, 25, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.el-menu--popup .el-menu-item {
  color: rgba(255, 255, 255, 0.85) !important;
}

.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-menu-item.is-active {
  background-color: rgba(255, 215, 0, 0.1) !important;
  color: #ffd700 !important;
}

.el-popper__arrow {
  display: none !important;
}
</style>

<style lang="scss" scoped>
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(to right, rgba(25, 25, 25, 0.85), rgba(25, 25, 25, 0.75));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;

  &.is-sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

// 使用媒体查询控制菜单显示
.el-menu-container {
  display: none; // 默认隐藏

  @media (min-width: 990px) {
    display: block; // 大屏幕显示
  }
}

.mobile-navbar {
  padding: 0.5rem 0;
  background-color: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;

  .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
  }

  // 左侧菜单按钮区域
  .navbar-left {
    .navbar-toggler {
      padding: 0.4rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: transparent;
      color: #fff;
      z-index: 1000;

      &:focus {
        box-shadow: none;
      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }
    }
  }

  // 中间搜索框区域
  .navbar-center {
    display: flex;
    justify-content: center;
    width: 100%;

    .mobile-search {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;

      .search-box {
        position: relative;
        width: 100%;
        height: 38px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        padding: 0 15px;

        &:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.15);
        }

        &:focus-within {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
        }

        .search-icon {
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
          margin-right: 10px;
          transition: color 0.3s;
        }

        input {
          flex: 1;
          background: transparent;
          border: none;
          height: 100%;
          color: #fff;
          font-size: 14px;
          font-weight: 300;
          letter-spacing: 0.3px;

          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
            font-weight: 300;
          }

          &:focus {
            outline: none;
          }
        }

        .clear-btn {
          background: transparent;
          border: none;
          color: rgba(255, 255, 255, 0.5);
          padding: 0;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;
          margin-left: 5px;
          border-radius: 12px;

          &:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
          }

          i {
            font-size: 12px;
          }
        }
      }
    }
  }

  // 右侧用户区域
  .navbar-right {
    .nav-user {
      .user-avatar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s;

        .user-avatar-img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          object-fit: cover;
        }

        .dropdown-icon {
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
          transition: transform 0.3s ease;
          opacity: 0.7;
        }

        // 当下拉菜单展开时的样式
        &[aria-expanded="true"] {
          .dropdown-icon {
            transform: rotate(180deg);
            opacity: 1;
          }
        }
      }

      .login-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s;

        &:hover {
          background: rgba(255, 215, 0, 0.1);
          color: #ffd700;
        }
      }
    }
  }

  // 响应式调整
  @media (max-width: 768px) {
    .navbar-center .mobile-search {
      max-width: 280px;
    }
  }

  @media (max-width: 576px) {
    .navbar-center .mobile-search {
      max-width: 200px;

      .search-box {
        height: 34px;
        padding: 0 12px;
      }
    }
  }

  // 导航菜单内容样式
  .navbar-collapse {
    position: fixed; // 改为固定定位
    top: 50px; // 调整顶部距离
    left: 0;
    right: 0;
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 999;

    &.show {
      display: block;
    }

    .navbar-nav {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .nav-item {
      margin: 0.5rem 0;
    }

    .nav-link {
      color: #fff;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover,
      &.active {
        color: #ffd700;
        background: rgba(255, 215, 0, 0.1);
      }

      .menu-icon {
        margin-right: 0.5rem;
        opacity: 0.8;
      }
    }

    // 分类下拉菜单样式
    .dropdown-menu {
      background: rgba(18, 18, 18, 0.98);
      border: none;
      padding: 0.5rem 0;
      margin-top: 0.5rem;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

      .dropdown-item {
        color: #fff;
        padding: 0.5rem 1rem;

        &:hover {
          background: rgba(255, 215, 0, 0.1);
          color: #ffd700;
        }
      }
    }
  }
}

// 添加动画效果
.collapse {
  transition: all 0.3s ease-out;
}

.collapsing {
  transition: all 0.3s ease-out;
}

// 响应式调整
@media (max-width: 768px) {
  .mobile-navbar {
    .navbar-collapse {
      top: 50px; // 在小屏幕上调整顶部距离
    }
  }
}

.hero-section {
  height: 500px;
  width: 100%;
  background-image: url("https://cdn.seovx.com/d/?mom=302");
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.greeting {
  margin-bottom: 30px;
}

.greeting-text {
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  .greeting-gradient {
    background: linear-gradient(
      45deg,
      #ffd700,
      // 金色
      #ff69b4,
      // 粉红
      #87ceeb,
      // 天蓝
      #98fb98 // 浅绿
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: greeting-gradient 6s ease infinite;
  }
}

.cursor {
  animation: blink 1s infinite;
  color: #ffd700; // 光标颜色设置为金色
}

@keyframes greeting-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.profile-info {
  text-align: center;
}

.profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid white;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.profile-image:hover {
  animation: spin 2s linear infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.profile-motto {
  font-size: 24px;
  font-weight: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s ease-in;

  &.fade-in {
    opacity: 1;
  }

  .gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d, #ff6b6b);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient 15s ease infinite, typing 3s steps(40, end);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid transparent;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

// 添加悬停效果
.gradient-text:hover {
  animation: gradient 3s ease infinite;
  transform: scale(1.05);
  transition: transform 0.3s ease;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

// 专门为分类下拉菜单的导航链接添加样式
.dropdown > .nav-link {
  &.active::after {
    opacity: v-bind('activeIndex.includes("/share") ? 1 : 0');
  }
}

// 确保下拉菜单位置正确
.el-popper {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

// 修复下拉菜单箭头样式
.el-popper__arrow {
  display: none !important;
}

.category-title {
  padding: 8px 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 5px;
}

.category-divider {
  margin: 5px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

//大于1000px  bootstrap的导航栏隐藏
@media (min-width: 990px) {
  .mobile-navbar {
    display: none;
  }

  // 调整右侧用户区域样式
  .el-dropdown {
    display: flex;
    align-items: center;
    margin-left: 20px;

    .user-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 10px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.1);

        .dropdown-icon {
          transform: rotate(180deg);
          opacity: 1;
        }
      }

      .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
      }

      .user-name {
        color: #fff;
        font-size: 14px;
        margin: 0 4px;
      }

      .dropdown-icon {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        transition: all 0.3s;
        opacity: 0.7;
      }
    }
  }

  // 搜索框样式
  .search-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;

    .search-box {
      position: relative;
      width: 250px;
      height: 36px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 18px;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      padding: 0 15px;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
      }

      &:focus-within {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
      }

      .search-icon {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        margin-right: 10px;
      }

      input {
        flex: 1;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }

        &:focus {
          outline: none;
        }
      }

      .clear-btn {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #fff;
        }

        i {
          font-size: 12px;
        }
      }
    }
  }
}

.el-menu--horizontal.el-menu {
  border-bottom: none;
}

.auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;

  .login-btn,
  .register-btn {
    height: 38px;
    font-size: 14px;
    border-radius: 6px;
    padding: 0 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }

  .login-btn {
    background: var(--el-color-primary);
    border-color: var(--el-color-primary);

    &:hover {
      background: var(--el-color-primary-light-3);
      border-color: var(--el-color-primary-light-3);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    }
  }

  .register-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
  }
}

// 移动端按钮样式
.auth-buttons-mobile {
  display: flex;
  gap: 8px;

  .login-btn-mobile,
  .register-btn-mobile {
    height: 32px;
    font-size: 13px;
    border-radius: 4px;
    padding: 0 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
  }

  .login-btn-mobile {
    background: var(--el-color-primary);
    border-color: var(--el-color-primary);

    &:hover {
      background: var(--el-color-primary-light-3);
      border-color: var(--el-color-primary-light-3);
    }
  }

  .register-btn-mobile {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.5);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .auth-buttons-mobile {
    .login-btn-mobile,
    .register-btn-mobile {
      height: 30px;
      font-size: 12px;
      padding: 0 10px;
    }
  }
}

@media (max-width: 576px) {
  .auth-buttons-mobile {
    .login-btn-mobile,
    .register-btn-mobile {
      height: 28px;
      font-size: 12px;
      padding: 0 8px;
    }
  }
}

.auth-buttons-container {
  justify-self: flex-end;
  display: flex;
  column-gap: 15px;

  .btn {
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;

    &.btn-primary {
      background-color: #0d6efd;
      border-color: #0d6efd;

      &:hover,
      &:focus {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25);
      }
    }

    &.btn-outline-light {
      color: #f8f9fa;
      border-color: rgba(248, 249, 250, 0.5);

      &:hover,
      &:focus {
        background-color: rgba(248, 249, 250, 0.1);
        color: #fff;
        border-color: rgba(248, 249, 250, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
      }
    }

    .fa {
      font-size: 14px;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .auth-buttons-container {
    column-gap: 10px;

    .btn {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
    }
  }
}

@media (max-width: 576px) {
  .auth-buttons-container {
    column-gap: 8px;

    .btn {
      padding: 0.2rem 0.4rem;
      font-size: 0.8rem;

      .fa {
        font-size: 12px;
      }
    }
  }
}
</style>
